<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- development version, includes helpful console warnings -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.js"></script>
    <script src="https://code.jquery.com/jquery-3.5.1.js"
            integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }
    </style>
</head>
<body>
<div id="app">
    <form>
        <label> 经度
            <input type="text" v-model="coordinate.longitude" name="lon">
        </label>
        <label> 纬度
            <input type="text" v-model="coordinate.latitude" name="lat">
        </label>

    </form>

    <button @click="find">提交</button>
    <template>
        <el-table
                :data="tableData"
                style="width: 100%"
                :row-class-name="tableRowClassName">
            <el-table-column
                    prop="date"
                    label="createTime"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="省份"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="shape"
                    h="省份">
            </el-table-column
            >
        </el-table>
    </template>





</div>

<script>
    // axios.defaults.baseURL = 'http://localhost:8080/shape/'

    // 实例化vue对象
    new Vue({
        el: "#app",
        data: {
            name: "hello vue",
            coordinate: {
                longitude: '116.4074',
                latitude: '39.9042'
            },
            tableData: [{
                date: '',
                name: '',
                address: '',
            }]
        },
        methods: {
            find() {
                let _this = this
                $.ajax({


                    type: 'GET',
                    data: {
                        lon: this.coordinate.longitude,
                        lat: this.coordinate.latitude
                    },
                    url: 'http://localhost:8080/shape/find',
                    success: function (resp) {
                        if (resp !=null && resp!==""){
                            // console.log( typeof resp)
                            console.log( resp)
                            // _this.tableData[0].date = resp.createTime
                            _this.tableData[0].name = resp.name
                            console.log(resp.name)
                            // _this.tableData[0].address = resp.geoStr

                            _this.tableData[0].address = resp.geoStr.substring(0,30)

                        }else {
                            console.log('没有找到')
                        }
                    }
                })
            },
            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            }
        }
    })

</script>

</body>
</html>